<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
		.fakeimg {
		    height: 200px;
		    background: #aaa;
		}
		#up{
			width: 100%;
			height: 280px;	
		}
		#down{
			width: 100%;
			height: 800px;
			margin-left: 2%;
			margin-right: 1%;
		}
		#down #center{
			width: 100%;
			height: 100%;
		}
	</style>

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
	<script src="//unpkg.com/vue@next"></script>
</head>
<body>



<div id="panel">
	<!-- 上半部分 -->
	<div id="up">
		<!-- 顶部背景图片 -->
		<div class="jumbotron text-center" style="margin-bottom:0;background-image: url(img/recruitment5.jpg);height: 200px;" >
		<!-- 用户信息 -->
			<div>
				<img :src="person.uimage" id="yhtx" alt="个人头像" style="width: 100px;height: 100px;border-radius: 50%;position: absolute;left: 30px;top:70px;"/>
				<h2 style="position: absolute;left: 150px;top: 70px;font-size: 20px;">{{ person.uname}}</h2>
				<p style="position: absolute;left: 150px;top: 130px;font-size: 18px;">{{ person.ucomment}}</p>
			</div>
		</div>
		<!-- 导航栏 -->
		<nav class="navbar navbar-inverse">
		  <div class="container-fluid">
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>                        
		      </button>
		    </div>
		    <div class="collapse navbar-collapse" id="myNavbar">
		      <ul class="nav navbar-nav">
				  <li class="active"><a href="yhzynr.html" style="font-size: 13px;" target="iframe"><span class="glyphicon glyphicon-home" style="color: green;"></span> 主页</a></li>
				  <li><a href="main.html" style="font-size: 13px;" > 首页</a></li>
				  <li><a href="sc.html" style="font-size: 13px;" ><span class="glyphicon glyphicon-bookmark" style="color: darkcyan;"></span> 收藏</a></li>
				  <li><a href="videohistory.html" style="font-size: 13px;"><span class="glyphicon glyphicon-heart" style="color: red;"></span>  历史</a></li>
				  <li><a href="grxx.html" style="font-size: 13px;" target="iframe"><span class="glyphicon glyphicon-user" style="color: dodgerblue;"></span>  个人信息</a></li>
				  <li><a href="xgtx.html" style="font-size: 13px;" target="iframe"><span class="glyphicon glyphicon-picture" style="color: rosybrown;"></span>  修改头像</a></li>
				  <li><a href="changePwd.html" style="font-size: 13px;" target="iframe"><span class="glyphicon glyphicon-cog" style="color: white;"></span> 修改密码</a></li>
		      </ul>
			  <!-- 搜索栏 -->
			  <form class="form-inline" role="form" style="padding-left: 80%;padding-top: 8px;">
			  	<div class="form-group">
			  		<label class="sr-only" for="name">名称</label>
			  		<input type="text" class="form-control" id="name" placeholder="搜索视频、动态">
			  	</div>
			  	<button type="submit" class="btn btn-default">
			  		<span class="glyphicon glyphicon-search"></span>
			  	</button>
			  </form>			  
		    </div>
		  </div>
		</nav>
	</div>
	<!-- 下半部分 -->
	<div id="down" >				
		<div id="center">
			<iframe src="yhzynr.html" name="iframe" width="100%" height="100%" frameborder="no"></iframe>
		</div>
	</div>
</div>

<script>
	const app=Vue.createApp({
		data(){
			return{
				person:{}
			}
		},
		created(){
			if (JSON.parse(localStorage.getItem("person"))!=null){
				this.person=JSON.parse(localStorage.getItem("person"))
			}
		},
		methods:{

		}
	}).mount("#panel")
</script>
</body>
</html>